import React, { useEffect, useState } from "react";
import { Col, Row, Card, Table } from "antd";
import * as Icon from '@ant-design/icons';
import './home.css'
import { getData } from "../../api";

// table列数据
const columns = [
    {
        title: '序号',
        dataIndex: 'number',
    },
    {
        title: '上传资源名称',
        dataIndex: 'source_name',
    },
    {
        title: '上传时间',
        dataIndex: 'upload_time',
    },
];

//
const countData =[
    {
        "name": "总上传资源数量",
        "value": "100",
        "icon": "CheckCircleOutlined",
        "color": "#2ec7c9"
    },
    {
        "name": "总下载资源数量",
        "value": "648",
        "icon": "CheckCircleOutlined",
        "color": "#ffb980"
    },
    {
        "name": "邀请用户数量",
        "value": "5",
        "icon": "ClockCircleOutlined",
        "color": "#5ab1ef"
    },
    {
        "name": "",
        "value": "",
        "icon": "CheckCircleOutlined",
        "color":"#2ec7c9"
    },
    {
        "name": "",
        "value": "",
        "icon": "CheckCircleOutlined",
        "color":"#ffb980"
    },
    {
        "name": "",
        "value": "",
        "icon": "ClockCircleOutlined",
        "color":"#5ab1ef"
    }
]

// 动态获取icon
const iconToElement = (name) => React.createElement(Icon[name])

const Home = () => {
    const userImg = require("../../assets/images/user_default.png")
    useEffect(() => {
        getData().then(({ data }) => {
            const { tableData } = data.data
            setTableData(tableData)
        })
    }, [])
    // 定义table数组
    const [tableData, setTableData] = useState([])
    return (
        <Row className="home">
            <Col span={8}>
                <Card hoverable>
                    <div className="user">
                        <img src={userImg} />
                        <div className="user-info">
                            <p className="name">Admin</p>
                            <p className="access">管理员</p>
                        </div>
                    </div>
                    <div className="login-info">
                        <p>上次登录时间：<span>2025-4-15</span></p>
                        <p>当前登录状态：<span>活跃</span></p>
                    </div>
                </Card>
                <Card hoverable>
                    <Table rowKey={"number"} columns={columns} dataSource={tableData} pagination={false}/>
                </Card>
            </Col>
            <Col span={16}>
                <div className="num">
                    {
                        countData.map((item, index) => {
                            return(
                                <Card key={index}>
                                    <div className="icon-box" style={{ background: item.color }}>
                                        { iconToElement(item.icon) }
                                    </div>
                                    <div className="detail">
                                        <p className="num">{item.value}</p>
                                        <p className="txt">{item.name}</p>
                                    </div>
                                </Card>
                            )
                        })
                    }
                </div>
            </Col>
        </Row>
    );
};

export default Home;